<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/common.css">
	<title>新建课堂</title>
	<script src="js/jquery.1.7.2.min.js"></script>
	<script src="js/layer/layer.js" type="text/javascript"></script>
    <script src="js/mobiscroll_002.js" type="text/javascript"></script>
	<script src="js/mobiscroll_004.js" type="text/javascript"></script>
	<link href="css/mobiscroll_002.css" rel="stylesheet" type="text/css">
	<link href="css/mobiscroll.css" rel="stylesheet" type="text/css">
	<script src="js/mobiscroll.js" type="text/javascript"></script>
	<script src="js/mobiscroll_003.js" type="text/javascript"></script>
	<script src="js/mobiscroll_005.js" type="text/javascript"></script>
	<script src="js/avalon.js" type="text/javascript"></script>
	<link href="css/mobiscroll_003.css" rel="stylesheet" type="text/css">
</head>
<body ms-controller="addClass">
	<div class="wxw-heading">
		<span class="wxw-heading-newClass">新建课堂</span>
		<button class="wxw-heading-save">保存</button>
	</div>
	<div class="wxw-container">
		<div class="wxw-container-1">
			<input type="text" class="wxw-container-1-inp" placeholder="名称">
		</div>
		<div class="wxw-container-1">
			<input placeholder="上课时间" class="wxw-container-1-inp" readonly="readonly" name="appDateTime" id="appDateTime" type="text">
		</div>
		<div class="wxw-container-1">
			<input type="text" class="wxw-container-1-inp"  placeholder="课堂开始时间">
		</div>
		<div class="wxw-container-2">
			<div class="wxw-container-2-total">
				<input type="text" class="wxw-container-2-total-inp" placeholder="总分">
			</div>
			<div class="wxw-container-2-rate">
				<input type="text" class="wxw-container-2-rate-inp"placeholder="老师占分比">
			</div>
			<span class="wxw-container-2-rate1">%</span>
		</div>
		<div class="wxw-container-1">
			<input type="text" class="wxw-container-1-inp" placeholder="课堂密码">
		</div>
		<div class="wxw-container-3">
			<div class="wxw-container-3-but">增加打分对象</div>
		</div>
		<div class="wxw-container-4" ms-repeat="name">
			<div class="wxw-container-4-name" >{{el}}</div>
			<div class="wxw-container-4-delete" 
			     ms-click="$remove">&times;</div>
		</div>
	</div>

</body>
<script type="text/javascript">
        $(function () {
			var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.datetime = {preset : 'datetime'};
			opt.default = {
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'scroller', //日期选择模式
				dateFormat: 'yyyy-mm-dd',
				lang: 'zh',
				showNow: true,
				nowText: "今天",
		        startYear: currYear - 10, //开始年份
		        endYear: currYear + 10 //结束年份
			};
		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
        });

        
        $('.wxw-container-3').on('click',function(){
            layer.open({
            	title: [
        '打分对象',
        'background-color:rgb(38,189,170); color:#fff;'
    ],
    content: '请输入姓名：<input type="text" class="layer"/>',
    btn: ['确认', '取消'],
    shadeClose: false,
    yes: function(){
        vm.name.push($('.layer').val());
    }, 
});
        });
        var vm=avalon.define({
                    $id:'addClass',
                    name:[],
                });

    </script>
</html>